// pages/other/other.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    activeIndex: -1,
    boo: false,
    windowWidth: 0,
    windowHeight: 0,
    del: false,
    list: [
      {
        title: 1
      },
      {
        title: 2
      },
      {
        title: 3
      },
      {
        title: 4
      },
      {
        title: 5
      },
      {
        title: 6
      }
    ],
    text: '拖拽至此删除',
    animationData: {}
  },
  
  // 长按
  long: function (e) {
    this.createAnimation();
    var index = e.target.dataset.index;
    var activeIndex = index;
    // 当前点击位置
    var pointerX = e.detail.x;
    var pointerY = e.detail.y;
    // 获取设备宽高
    var windowWidth = this.data.windowWidth;
    var windowHeight = this.data.windowHeight;
    var list = this.data.list;
    // 长按之后 让元素位于点击中心
    list[index].x = Math.min(Math.max(pointerX - 25, 0), windowWidth - 50);
    list[index].y = Math.min(Math.max(pointerY - 25, 0), windowHeight - 50);
    this.setData({
      boo: true,  // 长按之后  把boo改为true 
      list: list,
      activeIndex: activeIndex,
      text: '拖拽至此删除'
    })
  },

  // 移动
  move: function (e) {
    var index = e.target.dataset.index;
    var boo = this.data.boo;
    // 通过boo标记来判断用户是否经过长按之后调用该方法
    if (boo) {
      // 当前点击位置
      var pointerX = e.changedTouches[0].pageX;
      var pointerY = e.changedTouches[0].pageY;
      var windowWidth = this.data.windowWidth;
      var windowHeight = this.data.windowHeight;
      var list = this.data.list;
      // 移动时 动态赋值当前元素的偏移量  最大不超过屏幕
      list[index].x = Math.min(Math.max(pointerX - 25, 0), windowWidth - 50);
      list[index].y = Math.min(Math.max(pointerY - 25, 0), windowHeight - 50);
      this.setData({
        list: list
      })
      // 进入删除区域
      if (windowHeight - list[index].y <= 75) {
        this.setData({
          del: true,  // 进入可删除区域后  把删除的标记改为true
          text: '可删除'
        })
      } else {
        this.setData({
          del: false,
          text: '拖拽至此删除'
        })
      }
    }
    
  },


  // 抬起
  up: function (e) {
    this.endAnimation();
    var index = e.target.dataset.index;
    var list = this.data.list;
    var del = this.data.del;
    var activeIndex = -1;
    // 抬起的时候通过del来判断是否可删除
    if (del) {
      list.splice(index, 1);
      // 删除完成之后把del重新赋值为false
      this.setData({
        del: false
      })
      // 通过reset方法重置所有元素的偏移量
      this.reset(list);
    } else {
      // 如果不能删除  那么也需要重置元素的偏移量
      this.reset(list);
    }
    this.setData({
      boo: false,
      activeIndex: activeIndex
    })
  },

  // 动画
  createAnimation: function () {
    var animation = wx.createAnimation({
      duration: 700,
      timingFunction: 'ease',
    })

    this.animation = animation

    animation.translateY(-40).step()

    this.setData({
      animationData: animation.export()
    })
  },

  // 结束时动画
  endAnimation: function () {
    var animation = wx.createAnimation({
      duration: 700,
      timingFunction: 'ease',
    })

    this.animation = animation

    animation.translateY(40).step()

    this.setData({
      animationData: animation.export()
    })
  },


  // 重置数组
  reset: function (arr) {
    var xNumber = 0;
    for (var i = 0; i < arr.length; i++) {
      arr[i].x = xNumber;
      arr[i].y = 0;
      xNumber += 60
    }
    this.setData({
      list: arr
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    var list = this.data.list;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          windowWidth: res.windowWidth,
          windowHeight: res.windowHeight
        })
      }
    })
    this.reset(list);
  }
})